<template>
  <el-dialog :visible.sync="dialogShow" :title="title" @close="onClose">
    <el-row :gutter="15">
      <el-form
        ref="elForm"
        :model="formData"
        :rules="rules"
        size="medium"
        label-width="100px"
      >
        <el-col :span="12">
          <el-form-item label="管理员名称" prop="username">
            <el-input
              v-model="formData.username"
              placeholder="请输入管理员名称"
              clearable
              :style="{ width: '100%' }"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="管理员邮箱" prop="email">
            <el-input
              v-model="formData.email"
              placeholder="请输入管理员邮箱"
              clearable
              :style="{ width: '100%' }"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item v-if="formData.id" label="管理员密码">
            <el-input
              v-model="formData.password"
              placeholder="留空表示不修改"
              clearable
              :style="{ width: '100%' }"
            />
          </el-form-item>
          <el-form-item v-else label="管理员密码" prop="password">
            <el-input
              v-model="formData.password"
              placeholder="请输入管理员密码"
              clearable
              :style="{ width: '100%' }"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="管理员手机" prop="phone">
            <el-input
              v-model="formData.phone"
              placeholder="请输入管理员手机"
              clearable
              :style="{ width: '100%' }"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="管理员状态" prop="status">
            <el-switch
              v-model="formData.status"
              active-text="启用"
              inactive-text="禁用"
              :active-value="1"
              :inactive-value="2"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="管理员头像" prop="avatar">
            <el-row type="flex" justify="space-between" align="center" width="100%">
              <el-col v-if="formData.avatar" width="50%">
                <img class="img" :src="'http://124.223.14.236:7005' + '/' +formData.avatar" alt="">
              </el-col>
              <el-col width="50%">
                <el-button
                  size="small"
                  type="success"
                  icon="el-icon-upload"
                  @click="choose"
                >选择</el-button>
              </el-col>
            </el-row>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="管理员角色" prop="roleid_list">
            <el-checkbox-group
              v-model="formData.roleid_list"
              size="medium"
              :min="1"
              :max="3"
            >
              <el-checkbox
                v-for="(item, index) in roleList"
                :key="index"
                :label="item.id"
              >{{ item.role_name }}</el-checkbox>
            </el-checkbox-group>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-row type="flex" justify="end">
            <el-form-item size="large">
              <el-button plain @click="onClose">取消</el-button>
              <el-button
                plain
                type="primary"
                @click="submitForm"
              >确定</el-button>
            </el-form-item>
          </el-row>
        </el-col>
      </el-form>
    </el-row>
    <Cropperimg ref="Cropperimg" @upload="upload" />
  </el-dialog>
</template>
<script>
import Cropperimg from '@/components/Cropperimg'
import { getPerUserRole, addPerUser, editPerUserInfo } from '@/api/permission-user'
export default {
  components: {
    Cropperimg
  },
  props: [],
  data() {
    return {
      dialogShow: false,
      roleList: [],
      formData: {
        username: '',
        status: '',
        roleid_list: [],
        phone: '',
        password: '',
        email: '',
        avatar: ''
      },
      rules: {
        username: [
          {
            required: true,
            message: '请输入管理员名称',
            trigger: 'blur'
          }
        ],
        email: [
          {
            required: true,
            message: '请输入管理员邮箱',
            trigger: 'blur'
          },
          { type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur' }
        ],
        password: [
          {
            required: true,
            message: '请输入管理员密码',
            trigger: 'blur'
          }
        ],
        phone: [
          {
            required: true,
            message: '请输入管理员手机',
            trigger: 'blur'
          },
          {
            pattern: /^1[34578]\d{9}$/, // 正则校验不用字符串
            message: '请填写正确的手机号码', trigger: 'blur'
          }
        ],
        roleid_list: [
          { type: 'array', required: true, message: '请至少选择一个活动性质', trigger: 'change' }
        ]
      },
      fileList: []
    }
  },
  computed: {
    title() {
      return this.formData.id ? '修改' : '添加'
    }
  },
  watch: {},
  created() {
    this.getRoleList()
  },
  mounted() {},
  methods: {
    // 获取角色
    async getRoleList() {
      const res = await getPerUserRole()
      console.log(res)
      this.roleList = res.list
    },
    // 表单提交
    async  submitForm() {
      // 二次校验
      // 表单的校验
      await this.$refs.elForm.validate()
      // TODO 提交表单
      this.formData.id ? await editPerUserInfo(this.formData) : await addPerUser(this.formData)
      // 提示效果
      this.$message.success(this.formData.id ? '修改成功' : '添加成功')
      this.onClose()
      // 列表更新
      this.$emit('updateList')
    },
    // 头像上传之前校验
    avatarBeforeUpload(file) {
      const isRightSize = file.size / 1024 / 1024 < 2
      if (!isRightSize) {
        this.$message.error('文件大小超过 2MB')
      }
      const isAccept = new RegExp('image/*').test(file.type)
      if (!isAccept) {
        this.$message.error('应该选择image/*类型的文件')
      }
      return isRightSize && isAccept
    },
    // 弹框关闭
    onClose() {
      // 表单重置
      this.formData = {
        username: '',
        status: '',
        roleid_list: [],
        phone: '',
        password: '',
        email: '',
        avatar: ''
      }
      // 移除校验
      this.$nextTick(() => {
        this.$refs.elForm.clearValidate()
      })
      this.dialogShow = false
    },
    // 选择头像
    async choose() {
      this.$refs.Cropperimg.isshow = true
    },
    // 图片上传
    upload(data) {
      console.log(data)
      this.$refs.Cropperimg.isshow = false
      this.formData.avatar = data.url
    }
  }
}
</script>
<style>
.el-upload__tip {
  line-height: 1.2;
}
.img{
 width: 80px;
 height: 80px;
 border-radius: 50%;
}
</style>
